<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/layui.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/sccl.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/jquery-1.12.4.js" ></script>

<style type="text/css">
	.drag{
   width: 270px;
   height: 40px;
   line-height: 40px;
   background-color: #e8e8e8;
   position: relative;
   margin:0 auto;
  }
  .bg{
   width:40px;
   height: 100%;
   position: absolute;
   background-color: #75CDF9;
  }
  .text{
   position: absolute;
   width: 100%;
   height: 100%;
   text-align: center;
   user-select: none;
  }
  .btn{
   width:40px;
   height: 38px;
   position: absolute;
   border:1px solid #ccc;
   cursor: move;
   font-family: "宋体";
   text-align: center;
   background-color: #fff;
   user-select: none;
   color:#666;
  }
</style>
<script type="text/javascript">

  
	$(function() {
		$("#username").blur(function() {
			var username=$("#username").val();
			if(username==null||username==""){
				$(".clear").text("用户名不能为空！");
			}
			$.get("${pageContext.request.contextPath}/users/ajaxUserName",
					{"username":username},
					function(data) {
						if(data!=null){
							$(".clear").text("用户名已经存在，请重新输入！");
						}else{
						}
					})
		}).focus(function() {
			$(".clear").text("");
		})
		$("#password").blur(function() {
			var pattr=/^[a-zA-Z]\w{5,17}$/;
			var password=$("#password").val();
			if(password==null||password==""){
				$(".clear").text("密码不能为空！");
			}else if(!pattr.test(password)){
				$(".clear").html("密码格式不正确！");
			}
		}).focus(function() {
			$(".clear").text("");
		})
		$("#form1").submit(function() {
			var username=$("#username").val();
			if(username==null||username==""){
				$(".clear").text("用户名不能为空！");
				return false;
			}
			var pattr=/^[a-zA-Z]\w{5,17}$/;
			var password=$("#password").val();
			if(password==null||password==""){
				$(".clear").text("密码不能为空！");
				return false;
			}else if(!pattr.test(password)){
				$(".clear").html("密码格式不正确！");
				return false;
			}
			if(yanzheng!="success"){
				$(".clear").html("请滑动验证码进行验证！");
				return false;
			}
		})
	})
</script>
 <script type="text/javascript">
	$(function() {
		$("#floorid").change(function () {
            $("#layerid").empty();
            $("#layerid").append("<option value='00'>--请选择--</option>");

            var op=$(this).val();
            $.get("${pageContext.request.contextPath}/address/queryAddress",
                {"pid":op},function (result) {
                    $.each(result,function (index,address) {
                        $("#layerid").append("<option value='"+address.addressid+"'>"+address.name+"</option>");
                    });
                });
        });
		$("#layerid").change(function () {
            $("#roomid").empty();
            $("#roomid").append("<option value='00'>--请选择--</option>")
            var op=$(this).val();
            $.get("${pageContext.request.contextPath}/address/queryAddress",
                {"pid":op},function (result) {
                    $.each(result,function (index,address) {
                        $("#roomid").append("<option value='"+address.addressid+"'>"+address.name+"</option>");
                    });
                });

        });


	})
</script>

                    <script type="text/javascript">
                    	$(function() {
                    		$("#huoquyanzhengma").click(function() {
            					var email=$("#email").val();
            					var part=/^\d{5,12}@[qQ][qQ]\.(com|cn)$/;
            					if(email==null||email==""){
            						$(".clear").html("请输入邮箱后再发送验证码");
            					}else if(!part.test(email)){
            						$(".clear").html("邮箱格式不正确");
            					}else if(part.test(email)){
            						$.get("${pageContext.request.contextPath}/users/ishaveemail",
            								{"email":email},
            								function(data) {
            									if(data!=null){
            										$(".clear").html("此邮箱已经注册，请更换邮箱！");
            									}else{
            										$.get("${pageContext.request.contextPath}/users/ajaxemail",
            												{"email":email},
            												function(data) {
            													$("#data").val(data);
            													$(".clear").html("邮件发送成功！请查看验证码");
            												})
            									}
            								})
            						
            					}	
            				})
						})
						$(function() {
							$("form").submit(function() {
								var username=$("#username").val();
								if(username==null||username==""){
									$(".clear").text("请输入昵称！");
									return false;
								}
								var email=$("#email").val();
								if(email==null||email==""){
									$(".clear").text("请输入邮箱！");
									return false;
								}
								var yanzhengma=$("#yanzhengma").val();
								var data=$("#data").val();
								if(yanzhengma==null||yanzhengma==""){
									$(".clear").text("请输入验证码！");
									return false;
								}else if(yanzhengma!=data){
									$(".clear").text("验证码不正确");
									return false;
								}
								var pattr=/^[a-zA-Z]\w{5,17}$/;
								var password=$("#password").val();
								if(password==null||password==""){
									$(".clear").html("密码不能为空！");
									return false;
								}else if(!pattr.test(password)){
									$(".clear").html("密码格式不正确！");
									$("#password").val("");
									return false;
								}
								var password1=$("#repassword").val();
								if(password1==""||password1==null){
									$(".clear").html("确认密码不能为空！");
									return false;
								}else if(password!=password1){
									$(".clear").html("两次密码输入不一致请确认密码！");
									return false;
								}
								var floorid=$("#floorid").val();
								if(floorid=="00"){
									$(".clear").text("请选择楼区");
									return false;
								}
								var layerid=$("#layerid").val();
								if(layerid=="00"){
									$(".clear").text("请选择楼层");
									return false;
								}
								var roomid=$("#roomid").val();
								if(roomid=="00"){
									$(".clear").text("请选择房间号");
									return false;
								}
							})
						})
                    </script>
</head>
<body class="login-bg">
    <div class="login-box" style="height: 585px;">
        <header>
            <h1>加入宿舍管理系统</h1>
        </header>
        <div class="login-main">
			<form   action="${pageContext.request.contextPath}/users/saveUsers"  method="post">
			<input type="hidden" id="data" value="" />
				<p><input type="text" name="username"  id="username" autocomplete="off" placeholder="请输入登录名" style="width: 80%;height: 33px; border-color: #ccc;border-radius: 5px;" /></p><br />
				<p><input type="text"name="email" id="email" autocomplete="off" placeholder="请输入邮箱" style="width: 80%;height: 33px; border-color: #ccc;border-radius: 5px;"/></p><br />
				<p><input type="text" name="yanzhengma" autocomplete="off" placeholder="验证码" id="yanzhengma" style="width: 38%;height: 33px; border-color: #ccc;border-radius: 5px;"/><input type="button" id="huoquyanzhengma" class="layui-btn layui-btn-primary" value="获取验证码"/></p><br />
				<p><input type="password" id="password"  name="password" placeholder="请输入字母开头的6-8位字符密码 " style="width: 80%;height: 33px; border-color: #ccc;border-radius: 5px;"/></p><br />
				<p><input type="password" id="repassword" name="repassword" placeholder="请输入重复密码" style="width: 80%;height: 33px; border-color: #ccc;border-radius: 5px;" /></p><br />
				<p>
					<select id="floorid" name="floorid"style="width: 80%;height: 33px; border-color: #ccc;border-radius: 5px;">
                          	<option value="00">--请选择楼区--</option>
                          	<c:forEach items="${addlist}" var="add">
                          		<option value="${add.addressid}">${add.name}</option>
                          	</c:forEach>
                          </select>
				</p><br />
				<p>
					<select id="layerid" name="layerid" style="width: 80%;height: 33px; border-color: #ccc;border-radius: 5px;">
                          	<option value="00">--请选择楼层--</option>
                          </select>
				</p><br />
				<p>
					<select id="roomid" name="roomid"  style="width: 80%;height: 33px; border-color: #ccc;border-radius: 5px;">
                          	<option value="00">--请选择房间--</option>
                          </select>
				</p><br />
				
					
				
				
				
			
				
				
				
				<br />
				
				<div class="layui-form-item">
					<div class="pull-left login-remember">
						
						<label><a href="${pageContext.request.contextPath}/users/tologin">已有账号</a></label>

						
					</div>
					<div class="pull-right">
					<input type="submit" value="注册 &nbsp;&nbsp;" class="layui-btn layui-btn-primary"/>
					</div>
					<div class="clear" style="color: white;">${message}</div>
				</div>
			</form>        
		</div>
        
        
        
        
        <!-- 邮箱登录开始 -->
        <script type="text/javascript">
        	$(function() {
				$("#emailandpassword").hide();
				$("#youxiang").click(function() {
					$("#emailandpassword").show();
					$("#usernameandpassword").hide();
				})
				$("#huoquyanzhengma").click(function() {
					var email=$("#email").val();
					var part=/^\d{5,12}@[qQ][qQ]\.(com|cn)$/;
					if(email==null||email==""){
						$(".clear").html("请输入邮箱后再发送验证码");
					}else if(!part.test(email)){
						$(".clear").html("邮箱格式不正确");
					}else if(part.test(email)){
						$.get("${pageContext.request.contextPath}/users/ishaveemail",
								{"email":email},
								function(data) {
									if(data==null){
										$(".clear").html("经检测此邮箱还未注册");
									}else{
										$.get("${pageContext.request.contextPath}/users/ajaxemail",
												{"email":email},
												function(data) {
													$("#data").val(data);
												})
									}
								})
						
					}	
				})
				$("#emaillogin").click(function() {
					var a=$("#yanzhengma").val();
					var data=$("#data").val();
					var email=$("#email").val();
					if(a==null||a==""){
						$(".clear").html("请输入验证码！");
					}else if(a!=data){
						$(".clear").html("验证码不正确！");
					}else{
						location.href="${pageContext.request.contextPath}/users/emaillogin?email="+email;
					}
				})
			})
		</script>
        	
        <!-- 邮箱登录结束-->
        
        
        
    </div>
   
  </body>
</html>